<template>
	<view id="barter-mine">
		<view class="content-mine">
			<view class="mine-tab">
				<view :class="['tabs',tabState == obj.status?'tabs-act':'']" @click="setTabs(obj,k)" v-for="(obj,k) in tabsArr" :key="k">
					<view class="h3">{{obj.name}}</view>
					<view class="after"></view>
				</view>
			</view>
			
			<view class="mine-ul" v-if="shopsArr.length > 0">
				<view class="mine-li" v-for="(item,index) in shopsArr" :key="index">
					<view class="h3">平台商品</view>
					<view class="mine-row">
						<image :src="item.goods.goodsImg" class="row-img" mode="aspectFill"></image>
						<view class="row-wrap">
							<view class="wrap-t">{{item.goods.goodsName}}</view>
							<view class="wrao-p">价值：¥{{item.goods.shopPrice || 0}}</view>
						</view>
					</view>
					<view class="h3">
						<text>上传换物商品</text>
						<view class="row-state">
							<text v-show="item.orderStatus == 0">审核中</text>
							<text v-show="item.orderStatus == 1">审核通过</text>
							<text v-show="item.orderStatus == -1">未通过</text>
						</view>
					</view>
					<view class="mine-row">
						<image :src="item.bartergoods.images" class="row-img" mode="aspectFill"></image>
						<view class="row-wrap">
							<view class="wrap-t">{{item.bartergoods.good_name}}</view>
							<view class="wrao-p">价值：¥{{item.bartergoods.price || 0}}</view>
						</view>
					</view>
					<view class="address-box">
						<view class="mine-address">
							<image src="/static/icon/icon_address_01.png" class="ad-icon" mode=""></image>
							<view class="add-name">
								<view class="ad-h6">{{item.bartergoods.realname}}  {{item.bartergoods.mobile}}</view>
								<view class="ad-h6">{{item.bartergoods.address}}</view>
							</view>
						</view>						
					</view>
					<!-- 审核通过 -->
					<view class="mine-agree" v-show="item.orderStatus == 1">
						<view class="agree-l">
							<view class="ag-name">{{item.bartergoods.kd_company || ''}}</view>
							<view class="ag-name">{{item.bartergoods.kd_ordersn || ''}}</view>
						</view>
						<view class="agree-r">
							<view class="ag-btn" v-if="item.bartergoods.status == 1">已发货</view>
							<view v-if="item.bartergoods.status == 0" class="ag-btn act-btn" @click.stop="openShip(item)">立即发货</view>
						</view>
					</view>
					<!-- 审核未通过 -->
					<view class="mine-agree" v-show="item.orderStatus == -1">
						<view class="agree-l">
							<view class="ag-tips">未通过原因：{{item.bartergoods.reason?item.bartergoods.reason:'无'}}</view>
						</view>
						<view class="agree-r">
							<view class="ag-btn act-btn" @click.stop="resetSub(item)">重新提交</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="no-ul" v-else>
				--暂无更多数据--
			</view>
			
		</view>
		
		
		<!-- 发货弹框 -->
		<uni-popup ref="shipPopup" type="center" :mask-click="true">
			<view class="pay-popup">
				<view class="popup-top">
					<view></view>
					<view class="popup-title">发货</view>
					<view></view>
				</view>
				<view class="pas-box">
					<view class="popup-pas">
						<input type="text" v-model="shipObj.kd_company"  placeholder-style="color: #BBC0CB;" placeholder="请输入快递公司" />
					</view>			
					<view class="popup-pas">
						<input type="text" v-model="shipObj.kd_ordersn"  placeholder-style="color: #BBC0CB;" placeholder="请输入快递单号" />
					</view>		
				</view>
				<view class="popup-btn">
					<view class="btn" @click="closeFn()">取消</view>
					<view class="btn" @click="submitShip()">确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	// import { apiroot } from '@/siteInfo.js'
export default {
	data() {
		return {
			tabsArr: [
				{name: '待审核',status:'0'},
				{name: '已通过',status:'1'},
				{name: '未通过',status:'-1'},
			],
			tabState: -1,
			shopsArr: [],
			page: 1,
			totalPage: 1,
			shipObj: {
				id: '',
				kd_company: '',
				kd_ordersn: '',
			},
		};
	},
	onLoad() {
		this.getList();
	},
	components: {
		uniPopup
	},
	onShow() {

	},
	methods: {
		// 关闭
		closeFn(){
			this.shipObj.kd_company = '';
			this.shipObj.kd_ordersn = '';
			this.$refs.shipPopup.close()
		},
		// 打开弹框
		openShip(obj){
			this.shipObj.id = obj.bartergoods.id;
			this.$refs.shipPopup.open()
		},
		// 切换tab
		setTabs(obj,index){
			this.tabState = obj.status;
			this.invitFn();
		},
		// 初始化
		invitFn(){
			this.page = 1;
			this.totalPage = 1;
			this.getList();
		},
		// 获取列表
		getList(){
			this.$Request.request('/api/barter/index','get',{
				page: this.page,
				limit: 6,
				status: this.tabState
			}).then((res)=>{
				if(res.status == 1){
					let result = res.data;
					this.totalPage = result.last_page;
					if(this.page == 1){
						this.shopsArr = result.data;
					}else {
						this.shopsArr.push(...result.data);
					}
				}
			})
		},
		// 提交发货
		submitShip(){
			if(!this.shipObj.kd_company){
				return this.$api.msg('请输入快递公司')
			}
			if(!this.shipObj.kd_ordersn){
				return this.$api.msg('请输入快递单号')
			}
			console.log(JSON.stringify(this.shipObj))
			this.$Request.request('/api/barter/ship','post',this.shipObj).then(res=>{
				if(res.status == 1){
					this.$api.msg('发货成功')
					this.closeFn();
					setTimeout(()=>{
						this.invitFn();
					},1500)
				}else {
					this.$api.msg(res.msg)
				}
			})
		},
		// 重新提交
		resetSub(obj){
			uni.showModal({
				title: '提示',
				content: '是否确定重新提交',
				success: (res)=> {
					if (res.confirm) {
						this.resetFn(obj)
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			})
		},
		resetFn(obj){
			this.$Request.request('/api/barter/edit','post',{
				id: obj.id
			}).then(res=>{
				if(res.status == 1){
					this.$api.msg('提交成功')
					setTimeout(()=>{
						this.invitFn();
					},1500)
				}else {
					this.$api.msg(res.msg)
				}
			})
		},
	},
	onReachBottom() {
		if (this.page >= this.totalPage) return
		this.page++
		this.getList()
	},
};
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>

<style scoped lang="scss">
	.content-mine {
		padding-top: 120rpx;
		padding-bottom: 100rpx;
	}
	.mine-tab {
		position: fixed;
		background: #fff;
		width: 100%;
		padding: 0px 54rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// 浏览器调试改为88rpx  手机端改为0
		top: 88rpx;
		left: 0px;
		z-index: 11;
		.tabs {
			text-align: center;
			.h3 {
				color: #7A7C80;
				font-size: 32rpx;
				line-height: 44rpx;
				padding-bottom: 22rpx;
				padding-top: 26rpx;
			}
			.after {
				width: 156rpx;
				height: 4rpx;
				background: #EE486C;
				opacity: 0;
			}
		}
		.tabs-act {
			.h3 {
				color: #EE486C;
			}
			.after {
				opacity: 1;
			}
		}
	}
	
	.mine-ul {
		.mine-li {
			background: #fff;
			width: 100%;
			padding: 26rpx 0rpx 0px;
			margin-bottom: 20rpx;
			.h3 {
				padding: 0px 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1D1E22;
				margin-bottom: 22rpx;
				.row-state {
					font-weight: normal;
					font-size: 24rpx;
					color: #EE486C;
				}
			}
			.mine-row {
				display: flex;
				align-items: center;
				margin-bottom: 36rpx;
				padding: 0px 32rpx;
				box-sizing: border-box;
				.row-img {
					width: 112rpx;
					height: 112rpx;
					border-radius: 10rpx;
					display: block;
				}
				.row-wrap {
					flex: 1;
					margin-left: 24rpx;
					.wrap-t {
						font-size: 26rpx;
						color: #1D1E22;
						line-height: 36rpx;
						margin-bottom: 22rpx;
						@include nowrap();
					}
					.wrao-p {
						font-size: 28rpx;
						color: #EE486C;
						line-height: 40rpx;
					}
				}
			}
			.mine-row:last-child {
				margin-bottom: 26rpx;
			}
			
			
			.address-box {
				padding: 0px 32rpx 26rpx;
				box-sizing: border-box;
			}
			.mine-address {
				width: 100%;
				height: 96rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				padding: 0px 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				.ad-icon {
					width: 28rpx;
					height: 32rpx;
				}
				.add-name {
					margin-left: 24rpx;
					.ad-h6 {
						font-size: 24rpx;
						color: #1D1E22;
						line-height: 34rpx;
						margin-bottom: 2rpx;
						@include nowrap();
					}
				}
			}
			
			.mine-agree {
				width: 100%;
				padding: 24rpx 32rpx 26rpx;
				border-top: 2rpx solid #EDEDED;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				.agree-l {
					font-size: 24rpx;
					.ag-name {
						color: #1D1E22;
						line-height: 34rpx;
						margin-bottom: 2rpx;
					}
					.ag-tips {
						line-height: 34rpx;
						color: #A2A2A2;
					}
				}
				
				.agree-r {
					margin-left: 20rpx;
					.ag-btn {
						width: 146rpx;
						height: 56rpx;
						border: 2rpx solid #C3C3C3;
						border-radius: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #A2A2A2;						
					}
					.act-btn {
						border-color: #EE486C;
						color: #EE486C;
					}
				}
				
			}
			
		}
	}
	
	
	.pay-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 0upx 12rpx;
		box-sizing: border-box;
		.popup-top {
			padding: 0px 30upx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
		}
		.pas-box {
			padding: 0px 30upx;
			box-sizing: border-box;
		}
		.popup-pas {
			width: 100%;
			height: 100upx;
			// border: 2upx solid #393873;
			background: #F2F3F5;
			padding: 0px 26upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #292929;
			border-radius: 10upx;
			margin-bottom: 32upx;
		}
		
		.popup-btn {
			display: flex;
			align-items: center;
			padding-top: 10rpx;
			border-top: 2rpx solid rgba(0, 0, 80, 0.05);
			.btn {
				width: 50%;
				height: 87rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
				color: #909090;
			}
			.btn:last-child {
				color: #EE486C;
				border-left: 2rpx solid rgba(0, 0, 80, 0.05);
			}
		}
	}
	
</style>
